<template>
  <div class="account-info">
    <div class="account-header">
      <h2>账号信息</h2>
    </div>

    <div class="account-body">
      <el-descriptions
          title="Personal Information"
          direction="vertical"
          border
          style="margin-top: 20px"
      >
        <el-descriptions-item
            :rowspan="2"
            :width="140"
            label="Avatar"
            align="center"
        >
          <el-image
              style="width: 120px; height: 120px"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </el-descriptions-item>
        <el-descriptions-item label="Username">黎悠</el-descriptions-item>
        <el-descriptions-item label="Gender">女</el-descriptions-item>
        <el-descriptions-item label="Birthday">2000-11-28</el-descriptions-item>
        <el-descriptions-item label="Telephone">18198987070</el-descriptions-item>
        <el-descriptions-item label="Place">苏州</el-descriptions-item>
        <el-descriptions-item label="Remarks">
          <el-tag size="small">School</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="Email">
          <a href="mailto:<EMAIL>">YYQX@123.com</a>
        </el-descriptions-item>
        <el-descriptions-item label="University">
          <a href="https://www.szu.edu.cn/">苏州大学</a>
        </el-descriptions-item>
        <el-descriptions-item label="Hobby" :span="3">
          <el-tag size="small">Reading</el-tag>&nbsp;
          <el-tag size="small">Singing</el-tag>&nbsp;
          <el-tag size="small">Swimming</el-tag>&nbsp;
          <el-tag size="small">Traveling</el-tag>&nbsp;
          <el-tag size="small">Playing guitar</el-tag>&nbsp;
          <el-tag size="small">Photography</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="Address">
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>

</script>


<style scoped lang="scss">
.account-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

  .account-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    color: #282727;
    padding: 0 20px;
    background-color: #cff0fa;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
  }

  .account-body {
    padding: 0 20px 20px 20px;
  }
}

</style>